<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<html>
<head>
	<title>公司信息管理</title>
	<meta name="decorator" content="default"/>
	
	<script type="text/javascript">
		//省市二级联动
		function findArea(elem){
			var provinceId = $(elem).val();
			$("#city option:not(:first)").remove();
			$("#city").val("-1");
			if (provinceId == "-1") {
				$("#s2id_city").find("a:first").find("span:first").html("请选择市区");
				return false;
			}
			
			$.ajax({
				type:"post",
				data:"parent_id="+provinceId,
				url:"${ctx}/crm/business/customer/findCity",
				success:function(data){
					for(var i=0;i<data.length;i++){
						var nodes = "<option value='"+data[i].id+"'>"+data[i].name+"</option>";
						$("#city").append(nodes);
					}
				}
			});
			$("#s2id_city").find("a:first").find("span:first").html("请选择市区");
		}
		
		
		var trades = "";
		var returnValue = true;
		
		$(function(){
			
			//清除行业信息
			$("#testTrade option:first").attr("selected","selected");
			$("#tradeView").text("");
			
			//公司是否已录入
			$(window).keyup(function(event){
				if(event.keyCode==8){
					if($("#testName").val()==""||$("#testName").val()==null){
						$("#font").text("");
					}
				}
			});
			$("#testName").blur(function(){
				var name = $(this).val();
				if(name!=""){
					$.ajax({
						type:"post",
						url:"${ctx}/crm/business/customer/ajax",
						data:"name="+name,
						success:function(data){
							//alert(data);
							if(data==1){
								$("#font").text("已录入");
								$("#font").attr("color","red");
								returnValue = false;
							}else{
								$("#font").text("未录入");
								$("#font").attr("color","green");
								returnValue = true;
							}
						}
					});
				}
				
			});
			
			//选择行业
			$("#testTrade").change(function(){
				var trade = $(this).val();
				if(trades.indexOf(trade)>=0||trade=="-1"){
					$(this).val("-1");
					$("#s2id_testTrade").find("a span:first").text("请选择");
					return false;
				}
				trades = trades + trade + ",";
				
				var tradeName = $("option[value='"+trade+"']").text();
				var tradeView = $("#tradeView").text();
				if(tradeView == ""){
					$("#tradeView").text(tradeName);
				}else{
					$("#tradeView").text(tradeView+","+tradeName);
				}
				$(this).val("-1");
				$("#s2id_testTrade").find("a span:first").text("请选择");
			});
		});
		
		//添加多个地址，input克隆函数
		//id变量
		var vari = 1;
		function cloneAddress(elem){
			if(vari>=5){
				alert("最多可以添加5条地址");
				return false;
			}
			var selAddress = $(elem).parent().parent().parent().clone();
			selAddress.find("label").text("");
			selAddress.find("span").remove();
			selAddress.attr("id","control"+vari);
			selAddress.find("div").find("input").attr("id","selAddress"+vari);
			selAddress.find("div").find("input").attr("placeholder","");
			selAddress.find("div").find("input").val("");
			if(vari == 1){
				$("#control").after(selAddress);
			}else{
				$("#control"+(vari-1)).after(selAddress);
			}
			vari++;
		}
	</script>
	
	<script type="text/javascript">
		$(document).ready(function() {
			//$("#name").focus();
			$("#inputForm").validate({
				submitHandler: function(form){
					//多个地址保存
					var address = "";
					var bool = false;
					for(var i=0;i<vari;i++){
						if($("#selAddress"+i).val()!=""){
							bool = true;
						}
						if(i==0){
							address = $("#selAddress").val() + ",";
						}else{
							if(address == ""){
								address = $("#selAddress"+i).val() + ",";
							}else{
								if($("#selAddress"+i).val() != ""){
									address = address + $("#selAddress"+i).val() + ",";
								};
							};
						};
					}
					
					if(bool == false){
						returnVal = false;
					}else if(address.length>450){
						alert("地址总长度不能超过450个字符");
						returnVal = false;
					}else{
						$("#address").val(address);
					}
					
					//returnValue:公司录入判断结果;
					if(returnValue==false){
						//alert("公司已录入");
						return false;
					}
					if($("#tradeView").text()==""){
						alert("请选择行业");
						return false;
					}
					//公司网站表单验证
					if($("#website").val()!="" && $("#website").val()!="http:\/\/" && $("#website").val()!="https:\/\/"){
						var reg = /^([hH][tT]{2}[pP]:\/\/|[hH][tT]{2}[pP][sS]:\/\/)(([A-Za-z0-9-~]+)\.)+([A-Za-z0-9-~\/])+$/;
						if(!(reg.test($("#website").val()))){
							$("#fontWebsite").attr("color","red");
							return false;
						}
					}
					if($("#website").val()=="http:\/\/"||$("#website").val()=="https:\/\/"){
						$("#website").val("");
					}
					
					loading('正在提交，请稍等...');
					$("#trade").val(trades);
					trades = "";
					form.submit();
				},
				errorContainer: "#messageBox",
				errorPlacement: function(error, element) {
					$("#messageBox").text("输入有误，请先更正。");
					if (element.is(":checkbox")||element.is(":radio")||element.parent().is(".input-append")){
						error.appendTo(element.parent().parent());
					} else {
						error.insertAfter(element);
					}
				}
			});
		});
		
		function clearTrade(){
			$("#tradeView").text("");
			trades="";
		}
	</script>
	<style type="text/css">
		.input-xlarge{
			width:350px;
		}
		.control-group{
			padding:5px;
			padding-top:0px;
			padding-left:50px;
		}
	</style>
</head>
<body>
	<ul class="nav nav-tabs">
		<li class="active"><a href="javascript:void(0)">公司信息录入</a></li>
	</ul><br/>
	<form:form id="inputForm" modelAttribute="customer" action="${ctx}/crm/business/customer/save" method="post" class="form-horizontal">
		<form:hidden path="id"/>
		<form:hidden path="trade" id="trade"/>
		<sys:message content="${message}"/>		
		<div class="control-group">
			<label class="control-label">公司名：</label>
			<div class="controls">
				<form:input path="name" htmlEscape="false" maxlength="100" class="input-xlarge required" id="testName"/>
				<span class="help-inline"><font color="red" id="font">*</font> </span>
			</div>
		</div>
		<div class="control-group">
			<label class="control-label">选择地区：</label>
			<div class="controls">
				<form:select path="province" class="input-xlarge" id="province" style="width:165px;" onchange="findArea(this)">
					<form:option value="-1">请选择省份</form:option>
					<c:forEach items="${provinceArea}" var="area">
						<form:option value="${area.id}">${area.name}</form:option>
					</c:forEach>
				</form:select>&nbsp;&nbsp;&nbsp;&nbsp;
				<form:select path="city" class="input-xlarge" id="city" style="width:165px;">
					<form:option value="-1">请选择市区</form:option>
				</form:select>
			</div>
		</div>
		<div class="control-group">
			<label class="control-label">公司网站：</label>
			<div class="controls">
				<form:input value="http://" id="website" path="website" htmlEscape="false" maxlength="150" class="input-xlarge"/>
				<span class="help-inline"><font id="fontWebsite">格式:http://www.baidu.com</font> </span>
			</div>
		</div>
		<div class="control-group" id="controlGroup">
			<label class="control-label">行业选择：</label>
			<div class="controls">
				<form:select path="unused" htmlEscape="false" maxlength="100" class="input-xlarge required" id="testTrade">
					<form:option value="-1">请选择</form:option>
					<c:forEach items="${dict}" var="dict">
						<form:option value="${dict.id}">${dict.label}</form:option>
					</c:forEach>
				</form:select>
			</div>
		</div>
		<div class="control-group" id="controlGroup">
			<label class="control-label">公司行业：</label>
			<div class="controls">
				<p id="tradeView" style="float:left;"></p>&nbsp;&nbsp;&nbsp;
				<input type="button" class="btn" onclick="clearTrade()" value="清除">
			</div>
		</div>
		<form:input type="hidden" path="address" htmlEscape="false" maxlength="150" class="input-xlarge required" id="address"/>
		<div class="control-group" id="control">
			<label class="control-label">地址：</label>
			<div class="controls">
				<input placeholder="请至少填写一个地址" class="input-xlarge" id="selAddress"/>
				<span class="help-inline"><a href="javascript:void(0)" onclick="cloneAddress(this)"><img width="20px" src="${ctxStatic}/businessImg/add.png"></a></span>
			</div>
		</div>
		
		<div class="control-group">
			<label class="control-label">公司详情：</label>
			<div class="controls">
				<form:textarea style="width:800px;height:200px" path="content" htmlEscape="false" rows="4" maxlength="500" class="input-xxlarge required" id="content"/>
				<span class="help-inline"><font color="red">*</font></span>
			</div>
		</div>
		<div class="control-group">
			<label class="control-label">意向状态：</label>
			<div class="controls">
				<form:select path="statusId" htmlEscape="false" maxlength="64" class="input-xlarge required">
					<form:option value="暂无意向">暂无意向</form:option>
					<form:option value="意向客户">意向客户</form:option>
				</form:select>
			</div>
		</div>
		<div class="form-actions" style="padding-left:250px;">
			<shiro:hasPermission name="business:customer:edit"><input id="btnSubmit" class="btn btn-primary" type="submit" value="保 存"/>&nbsp;</shiro:hasPermission>
			<input id="btnCancel" class="btn" type="button" value="返 回" onclick="history.go(-1)"/>
		</div>
	</form:form>
</body>
</html>